<style scoped>
* {user-select: none;}
.el-menu--horizontal
{height: 10vh;}
.el-menu {background-color: #fff;border-bottom: 0px;} /* 整个导航栏 */
/* 自定义菜单项的文字颜色和粗细 */
.el-menu--horizontal .el-menu-item {border-radius: 16%;color: var(--background-color);font-size: medium;font-weight: bold; /* 文字粗细为加粗 */}
.el-menu--horizontal .el-sub-menu .el-menu-item /* 二级子菜单项 */
{color: #2c3e50;}
.el-menu--horizontal .el-menu-item:hover,
.el-menu--horizontal .is-active:hover {
  color: #2c3e50;
}
.el-menu--horizontal .el-menu-item:hover {border-radius: 16%; background-color: #4abf8a;}
.el-menu-demo {margin-bottom: 20px;}
.left-slot {display: flex;flex-flow: column wrap;align-items: center;justify-content: center;text-align: center;font-weight: bold;color: #2c3e50;padding: 0 1rem;}
.search {height: 2rem;width: 11rem;border: #2c3e504d solid 1px;border-radius: 30px;box-sizing: border-box;margin: auto 0;padding: .5rem .5rem .5rem 2rem;background: url("@/assets/search.svg") no-repeat left center / contain;}
.search:hover {border: #4abf8a solid 1px;}
.search:focus{outline: 0;border: #4abf8a solid 1px;}
.nav-items {position:absolute;right: .1rem;margin:.1rem;top: 50%;transform: translateY(-50%);display:flex;justify-content: flex-end;gap: .1rem;}
/* 当页面宽度小于 1350px 时的样式 */
@media (max-width: 1350px) {
  .el-menu--horizontal {height: 8vh; /* 减小导航栏高度 */}
  .el-menu--horizontal .el-menu-item {font-size: small; /* 减小字体大小 */}
  .search {height: 4vh;width: 4rem; /* 减小搜索框宽度 */}
}
</style>


<template>
  <el-menu  mode="horizontal"  active-text-color="#4abf8a"
    :style="{ backgroundColor: params.backgroundColor, color: params.primaryColor }"
    :default-active="activeIndex"
    @select="onSelectChange"
  >
    <div class="left-slot">
      <slot name="left"></slot>
    </div>
      <i class="el-icon-edit"></i>
      <input class="search" v-model="search" />
      <div class="nav-items">
    <!-- 动态渲染菜单项 -->
    <template v-for="item in params.menuData" :key="item.index">
      <!-- 普通菜单项 -->
      <el-menu-item
        v-if="!item.children"
        :index="item.index"
        :disabled="item.disabled"
        :style="{
          color: item.index === activeIndex ? params.activeTextColor : params.textColor,
        }"
      >
        {{ item.title }}
      </el-menu-item>

      <!-- 子菜单 -->
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ item.title }}</template>
        <!-- 递归渲染子菜单 -->
        <template v-for="child in item.children" :key="child.index">
          <!-- 普通子菜单项 -->
          <el-menu-item
            v-if="!child.children"
            :index="child.index"
            :style="{
              color: child.index === activeIndex ? params.activeTextColor : params.textColor,
            }"
          >
            {{ child.title }}
          </el-menu-item>

          <!-- 嵌套子菜单 -->
          <el-sub-menu v-else :index="child.index">
            <template #title>{{ child.title }}</template>
            <el-menu-item
              v-for="subChild in child.children"
              :key="subChild.index"
              :index="subChild.index"
              :style="{
                color: subChild.index === activeIndex ? params.activeTextColor : params.textColor,
              }"
            >
              {{ subChild.title }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-sub-menu>
    </template>
    <el-avatar :size="50" :src="avatarUrl" />
    </div>
  </el-menu>
</template>

<script>
export default {
  props: {
    params: { type: Object, required: true, default: () => ({ menuData: [], primaryColor: '#2c3e50', backgroundColor: '#fff' }) }
  },

  data()
  {
    return {
      activeIndex: '1', // 默认激活的菜单项
      avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    onSelectChange(key)
    {
      console.log('选中菜单:', key)
      this.activeIndex = key
      this.$emit('menu-select', key) // 触发父组件事件
    }
  }
}
</script>

